import React from "react";
import {Tooltip, ActionIcon, RadioGroup, Group, Radio} from "@mantine/core";
import {modals} from "@mantine/modals";
import {notifications} from "@mantine/notifications";
import {IconChartBubble} from "@tabler/icons-react";

export const IpdSimuGran = ({value, disabled}: {value: string; disabled: boolean}) => {
  return (
    <Tooltip
      label="最小颗粒度配置"
      withArrow
      position="bottom"
      transitionProps={{transition: "fade", duration: 300}}
    >
      <ActionIcon
        variant="light"
        color="orange"
        disabled={disabled}
        onClick={() => {
          modals.openConfirmModal({
            title: "最小颗粒度配置",
            children: (
              <RadioGroup
                defaultValue={value}
                label="最小颗粒度"
                description="初次仿真时所有局向的带宽利用率，下一步仍可调整"
                withAsterisk
              >
                <Group mt="xs">
                  <Radio value="400G" label="400G" />
                  <Radio value="100G" label="100G" />
                  <Radio value="10G" label="10G" />
                  <Radio value="1G" label="1G" />
                </Group>
              </RadioGroup>
            ),
            labels: {confirm: "确定", cancel: "取消"},
            onCancel: () => console.log("Cancel"),
            onConfirm: () => {
              console.log("Confirmed");
              notifications.show({
                color: "green",
                title: "最小颗粒度配置",
                message: "最小颗粒度配置成功",
              });
            },
          });
        }}
      >
        <IconChartBubble size={16} />
      </ActionIcon>
    </Tooltip>
  );
};
